<template>
  <div class="home">
    <div class="top_nav">
      <div class="top_search">
        <van-search class="search" left-icon right-icon="search" v-model="value" shape="round" placeholder="请输入搜索关键词"
          @click-right-icon="searchComic" @input="searchSugs" />
        <div class="searchSug" :style="{ height }">
          <ul>
            <li v-for="(item, index) in searchSugData" :key="index" v-html="item" @click="getKeyword(item)"></li>
          </ul>
          <div class="err" v-if="searchSugData.length === 0">
            暂无该漫画搜索关键字!
          </div>
        </div>
        <img src="../assets/date.png" alt />
      </div>
      <div class="handover">
        <van-tabs v-model="active" color="#fff" title-inactive-color="#333" title-active-color="#fff" line-width="10px"
          background="inherit" @click="switchPath(active)">
          <van-tab v-for="(item, index) in tabData" :key="index" :title="item.title" v-bind:key="item.path"></van-tab>
        </van-tabs>
      </div>
      <div class="router">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import { tabData } from "@/js/data";
import { searchSug } from "@/api/api";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      active: 0,
      tabData,
      height: "",
      searchSugData: [],
    };
  },
  created() {
    this.active = Number(this.$route.query.activeIndex)
  },
  methods: {
    //查找对应漫画
    searchComic() {
      if (this.value.length === 0) {
        return;
      }
      let path = "/search";
      this.$router.push({ path, query: { keyword: this.value } });
    },
    //搜索漫画关键字推荐
    searchSugs() {
      if (this.value.length === 0) {
        this.height = "0";
        return;
      }
      this.height = "200px";
      //获取关键字搜索建议
      searchSug(this.value)
        .then(res => {
          this.searchSugData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取对应关键字在输入框显示
    getKeyword(keyword) {
      //去除标签
      keyword = keyword.replace(/<[^>]+>/g, "");
      this.value = keyword;
      this.height = "0";
    },
    //切换选项栏
    switchPath(i) {
      let path = this.tabData[i].path
      let id = this.tabData[i].tabId
      this.$store.state.activePath = `${path}?id=${id}&activeIndex=${i}`
      this.$router.push({ path, query: { id, activeIndex: i } })
    }
  },
  components: { router }
};
</script>

<style lang="scss" scoped>
.home {
  .top_nav {
    height: 200px;
    background: linear-gradient(to right bottom,
        rgb(76, 141, 158) 5%,
        rgb(44, 98, 144) 95%);
    border-bottom-right-radius: 45%;
    border-bottom-left-radius: 45%;
    box-shadow: 0 0 40px 10px rgb(44, 98, 144);

    .top_search {
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: relative;

      ::v-deep .van-icon {
        font-size: 20px;
      }

      .searchSug {
        position: absolute;
        top: 44px;
        left: 28px;
        background: #f7f8fa;
        width: 77%;
        height: 0;
        z-index: 999;
        overflow-y: auto;
        transition: height 0.5s;

        .err {
          text-align: center;
          font-size: 16px;
          color: #ff3f3f;
          line-height: 140px;
        }

        ul {
          padding: 10px;

          li {
            height: 25px;
            margin-bottom: 10px;
            line-height: 25px;
            cursor: pointer;
            font-size: 16px;
            border-bottom: 1px solid #fff;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            &:last-child {
              margin-bottom: 0;
              border-bottom: none;
            }

            &:hover {
              color: #ff3f3f;
            }
          }
        }
      }
    }

    .search {
      width: 90%;
      background: inherit;
    }

    img {
      width: 25px;
      height: 25px;
    }
  }
}
</style>